<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="./../../themes/default/dialog.css?7dab4ea0">
    <link rel="stylesheet" href="./../../themes/default/css/custom-icons.css">
    <script type="text/javascript" src="../internal.js?df5a6b9e"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        .wrapper {
            width: 620px;
            padding: 10px;
            height: 399px;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
            font-size: 13px;
        }
        .wrapper .input::placeholder{
            color:#999;
        }

        .ai-functions-container {
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            max-height: 120px;
            overflow-y: auto;
            margin-bottom: 5px;
        }

        .ai-operate {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 8em;
            text-align: center;
            text-decoration: none;
            line-height: 30px;
            background: var(--edui-color-border);
            color: #111;
            border-radius: 15px;
            padding: 0 10px;
            margin: 5px 5px 5px 0;
            transition: all 0.2s ease;
        }

        .ai-operate i {
            margin-right: 5px;
            font-size: 14px;
        }

        .ai-operate:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, .2);
            background: #e0e0e0;
            transform: translateY(-1px);
        }

        .btn.primary:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        }

        .close:hover {
            color: red !important;
        }
        
        .result-container {
            margin-top: 10px;
            background: rgba(0,0,0,0.03);
            padding: 10px;
            border-radius: 10px;
            overflow: auto;
            border: 1px solid #eee;
        }
        
        .ub-html {
            line-height: 1.6;
        }
        
        .ub-html p {
            margin-bottom: 8px;
        }
        
        .ub-html code {
            background: rgba(0,0,0,0.05);
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .selected-text {
            line-height: 30px;
            padding: 0 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: inline-flex;
            align-items: center;
            background: rgba(0,0,0,0.03);
            border: 1px solid #eee;
            max-width: 600px;
        }
        
        .input-container {
            padding: 5px;
            border-radius: 30px;
            box-shadow: 0 0 10px #CCC;
            transition: all 0.3s ease;
        }
        
        .input-container:focus-within {
            box-shadow: 0 0 15px rgba(0, 120, 255, 0.3);
        }
        
        .btn-send {
            width: 30px;
            text-align: center;
            padding: 0;
            border-radius: 50%;
            background: #4395ff;
            color: white;
        }
        
        .btn-send:hover {
            background: #3384ee;
        }
        
        @keyframes spin {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
    </style>
</head>
<body>
<div class="wrapper" id="app" v-cloak>

    <div>
        <div v-if="selectText" class="selected-text">
            <div style="margin-right:5px;">
                <i class="edui-iconfont edui-icon-outline" style="font-size:18px;"></i>
            </div>
            <div style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:550px;">
                {{ selectText }}
            </div>
        </div>
        <div class="flex input-container">
            <div class="flex-grow">
                <input type="text" v-model="inputText"
                       class="input"
                       style="width:540px;border-color:transparent;font-size:14px;"
                       placeholder="告诉 AI 下一步应该如何？比如：帮我翻译成英语"/>
            </div>
            <div class="flex-shrink-0" style="width:32px;padding-right:5px;">
                <a href="javascript:;" class="btn primary btn-send"
                   @click="doSubmit">
                    <i v-if="loading" class="edui-iconfont edui-icon-refresh"
                       style="display:inline-block;animation:spin 2s linear infinite;"></i>
                    <i v-else class="edui-iconfont edui-icon-right-direction"></i>
                </a>
            </div>
        </div>
        <div v-if="resultHtml || resultError"
             style="border-top:1px solid #F2F2F2;margin-top:10px;padding-top:10px;">
            <div v-if="resultError"
                 style="color:red;background:rgba(255,0,0,0.1);margin-bottom:10px;padding:10px;border-radius:10px;">
                {{ resultError }}
            </div>
            <div class="flex flex-items-center" style="height:30px;">
                <div class="flex-grow">
                    <i class="edui-iconfont edui-icon-robot" style="font-size:16px;"></i>
                    以下为生成的结果
                </div>
                <div>
                    <a v-if="!loading" @click="doInsert" href="javascript:;" class="btn sm">
                        <i class="edui-iconfont edui-icon-page-break"></i>
                        插入
                    </a>
                    <a v-if="!loading&&selectText" @click="doReplace" href="javascript:;" class="btn sm">
                        <i class="edui-iconfont edui-icon-eraser"></i>
                        替换
                    </a>
                </div>
            </div>
            <div class="result-container" :style="{height:resultHeight}">
                <div class="ub-html" v-html="resultHtml"></div>
            </div>
        </div>
        <div v-else
             style="border-top:1px solid #F2F2F2;margin-top:10px;padding-top:10px;">
            <div style="color:#666;">
                <i class="edui-iconfont edui-icon-bell" style="font-size:16px;"></i>
                提示：您可以在上面输入文字生成内容 或 选择下方的操作
            </div>
            <div class="ai-functions-container">
                <a href="javascript:;" v-for="f in functions"
                   @click="doSubmitFunction(f)"
                   class="ai-operate">
                    <span v-html="f.text"></span>
                </a>
            </div>
        </div>
    </div>

</div>
<script src="../../third-party/vue.js?1f65e021"></script>
<script src="../../third-party/showdown.js?d5372104"></script>
<script src="../../third-party/jquery-1.10.2.js?628072e7"></script>
<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?555edf0a"></script>
<script type="text/javascript" src="./ai.js?eb799e7f"></script>
</body>
</html>
